<template>
    <div>
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="标题" :label-col="{ span: 1 }" :wrapper-col="{ span: 8 }">
          <a-input v-decorator="['title', {
            rules: [{required: true, message: '您还未填入标题'}]
          }]" />
        </a-form-item>
        <a-form-item label="描述" :label-col="{ span: 1 }" :wrapper-col="{ span: 8 }">
          <a-input v-decorator="['description', {
            rules: [{required: true, message: '您还未填入描述'}]
          }]" />
        </a-form-item>
        <a-form-item label="内容" :label-col="{ span: 1 }" :wrapper-col="{ span: 15 }">
          <a-textarea :autosize="{ minRows: 15 }"  v-decorator="['content', {
            rules: [{required: true, message: '您还未填入内容'}]
          }]" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 5 }">
          <a-button type="primary" html-type="submit">
            提交文章
          </a-button>
        </a-form-item>
      </a-form>
    </div>
</template>

<script>
export default {
  name: 'ArticleAdd',
  data () {
    return {

    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit  (e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('验证通过，值为: ', values);
          this.addArticle(values);
        }
      });
    },
    addArticle (values) {
      this.$axios.post('/article/add_article', {...values, ...{user_id: this.$store.getters.user_id}}).then(res => {
        let data = res.data;
        if(data.ok){
          this.$message.success('提交成功', 1, ()=>{
            this.$router.push({name: 'HomePage'})
          })
        }else{
          this.$message.error('提交失败，请稍后重试！')
        }
      }).catch(err => {
        console.error(err)
        this.$message.error('服务器或网络出错，请稍后重试！')
      })
    }
  }
}
</script>

<style scoped>

</style>
